<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>09_Vue实例_生命周期</title>
</head>
<body>
<!--
1. vue对象的生命周期
  1). 初始化显示
    * beforeCreate()
    * created()
    * beforeMount()
    * mounted()
  2). 更新状态
    * beforeUpdate()
    * updated()
  3). 销毁vue实例: vm.$destory()
    * beforeDestory()
    * destoryed()
2. 常用的生命周期方法
  created()/mounted(): 发送ajax请求, 启动定时器等异步任务
  beforeDestory(): 做收尾工作, 如: 清除定时器
-->

<div id="root">
  <p>{{num}}</p>
  <button @click="num++">按钮</button>
  <button @click="destroy">卸载</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  /*
    Vue的生命周期函数：https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90
      1. 挂载阶段（初始化阶段）: 一上来自动触发
        beforeCreate
          在数据代理之前触发的
          此时还不能通过this访问数据(data)
        created
        beforeMount
        mounted
          页面渲染完毕了，此时才能操作DOM
          发送请求、设置定时器、绑定事件等一次性任务

      2. 更新阶段：更新data数据才会触发
        beforeUpdate
        updated
      3. 卸载阶段：this.$destroy()才会触发
        beforeDestroy 
          做一些收尾工作：清除定时器、解绑事件
        destroyed
  */
  const vm = new Vue({
    // el: '#root',
    data: {
      num: 0
    },
    methods: {
      destroy() {
        // 卸载
        this.$destroy();
      }
    },
    beforeCreate() {
      // 在创建之前时还不能访问数据（data、methods、computed）
      // 数据代理：将data、methods、computed中的数据代理this上
      // beforeCreate是再数据代理之前触发的
      console.log(this.num);
      console.log('beforeCreate()');
    },
    created() {
      console.log(this.num);
      console.log('created()');
    },
    beforeMount() {
      console.log('beforeMount()');
    },
    mounted() {
      console.log('mounted()');
    },
    
    beforeUpdate(){
      console.log(this.num);
      console.log('beforeUpdate()');
    },
    updated() {
      console.log(this.num);
      console.log('updated()');
    },
    beforeDestroy() {
      console.log('beforeDestroy()');
    },
    destroyed() {
      console.log('destroyed()');
    },
  })

  vm.$mount('#root');
</script>
</body>
</html>